<template name='header_select'>
<view >

	<!-- 目录处理 -->
	<view class="add-boxs" >
		<view class="header-lib">
			<view class="add-goods floatleft">
				<text selectable="true"class="riskTitle"  id="headerLeft">
					选择分类：
				</text>
				<view class="flex flex1 h100" id="header">
					<input
					v-model="selectHeaderData.value"  
					placeholder="正新"
					placeholder-class="placeholder-class"
					class="search-ipu"
					@input="searchHeader"
					@confirm="searchHeader"
					@focus="calculateHeaderLeftBorder()"
					style="position: relative;z-index: 11;"
					/>
					<view class="input-but" v-if="nowAdd" @click="$emit('addHeader',{})">点击新增</view>
				</view>
				
				<!-- 待选数据 -->
				<view class="misk-my" v-if="selectHeaderData.mask==true || selectDirectoryData.mask==true" 
				@click="selectHeaderData.mask=false,selectDirectoryData.mask=false"></view>
				
				
				<view class="w100-my tab-user-my" 
				style="position: absolute;z-index: 12;height: 300px;background-color: #fff;"
				:style="selectHeaderData.style"
				v-show="selectHeaderData.list.length >0 && selectHeaderData.mask==true"
				>
					<view class="boxsss100" style="height: auto;">
						<table >
							<!-- 表头 -->
							<thead>
								<tr >
									<th style="max-width: 15px;width: 15px;">序</th>
									<th>名称</th>
								</tr>
							</thead>
							<tbody>
								<!-- 内容 -->
								<tr v-for="(item,index) in selectHeaderData.list" 
								:key="index"
								@click="selectHeaderDataCheck(index)"
								>
									<td>{{index+1}} </td>
									
									<td>{{item.name}}</td>
								</tr>
							</tbody>
						</table>
					</view>
				</view>
				<!-- 数据列表end -->
			</view>
			
			<view class="add-goods floatleft">
				<text selectable="true" class="riskTitle" id="directoryLeft">
					选择目录：
				</text>
				<view class="flex flex1 h100" id="directory">
					<input
					v-model="selectDirectoryData.value"  
					placeholder="正新"
					placeholder-class="placeholder-class"
					class="search-ipu"
					@input="searchDirectory"
					@confirm="searchDirectory"
					@focus="calculateDirectoryLeftBorder()"
					style="position: relative;z-index: 11;"
					/>
					<view class="input-but"  v-if="nowAdd" @click="$emit('addDirectory',{})">点击新增</view>
					<view class="search-but back_color " v-if="AiAuto" style="margin-left: 15px;" @click="goodsAiToHeader">AI分类</view>
				</view>
				
				<!-- 待选数据 -->
				
				<view class="w100-my tab-user-my" 
				style="position: absolute;z-index: 12;height: 300px;background-color: #fff;"
				:style="selectDirectoryData.style"
				v-show="selectDirectoryData.list.length >0 && selectDirectoryData.mask==true"
				>
					<view class="boxsss100" style="height: auto;">
						<table >
							<!-- 表头 -->
							<thead>
								<tr >
									<th style="max-width: 15px;width: 15px;">序</th>
									<th>名称</th>
								</tr>
							</thead>
							<tbody>
								<!-- 内容 -->
								<tr v-for="(item,index) in selectDirectoryData.list" 
								:key="index"
								@click="selectDirectoryDataCheck(index)"
								>
									<td>{{index+1}} </td>
									
									<td>{{item.name}}</td>
								</tr>
							</tbody>
						</table>
					</view>
				</view>
				<!-- 数据列表end -->
				
				
			</view>
		</view>
	</view>	

</view>
</template>

<script>

	export default{
		name:'header_select',
		data(){
			return{
				selectHeaderData:{
					value:'',
					list:[],
					index:-1,
					checkedId:'',
					mask:false,
					style:{}
				},
				sourceDirectoryList:[],
				selectDirectoryData:{
					value:'',
					list:[],
					index:-1,
					checkedId:'',
					mask:false,
					style:{}
				},
					
			}
		},
		 // 此处定义传入的数据
		props: {
			nowAdd: {
				type: Boolean,
				default: true
			},
			AiAuto: {
				type: Boolean,
				default: false
			},
			AiAutoGoodsName: {
				type: String,
				default: ''
			},
			headerList: {
				type: Array,
				default: () => {
					return []
				}
			},
			header_id: {
				type:String,
				default :''
			},
			directory_id: {
				type:String,
				default :''
			},
		},
		watch: {
		},
		created() {
			// 要查找的id值
			var searchId = this.header_id;
			// 数组
			var originalArray = this.headerList

			if(searchId.length>0 && originalArray !=undefined  && originalArray.length>0){
				for(var i=0;i<originalArray.length;i++){
					if(originalArray[i].id == searchId){
						var foundObject = originalArray[i]
						this.selectHeaderData.value     = foundObject.name
						this.selectHeaderData.checkedId = this.header_id
						this.selectHeaderData.index     = 0
						this.selectHeaderData.list.push(foundObject)
						this.sourceDirectoryList        = foundObject.list
						
						// 要查找的id值
						var searchId = this.directory_id;
						// 数组
						var originalArrays = this.sourceDirectoryList
						if(searchId.length>0 && originalArrays !=undefined && originalArrays.length>0){
							for(var ii=0;ii<originalArrays.length;ii++){
								
								if(originalArrays[ii].id == searchId){
									var foundObject = originalArrays[ii]
									this.selectDirectoryData.index     = 0
									this.selectDirectoryData.value     = foundObject.name
									this.selectDirectoryData.checkedId = this.header_id
									
									this.selectDirectoryData.list.push(foundObject)
									
									// 输出结果
									//console.log(foundObject.name,'输出结果');
								}
							}
							
						}
					}
				}
			
			}
		},
		methods:{
			/**
			 * 搜索分类
			*/
			searchHeader(){
				if(this.selectHeaderData.value.length<=0 ){
					this.selectHeaderData.list = this.headerList
					
				}else{
					// 要查找的字符串
					const searchString  = this.selectHeaderData.value;
					const originalArray = this.headerList;
					// 使用 filter 方法查找 name 属性中包含搜索字符串的对象
					const filteredArray = originalArray.filter(item => item.name.includes(searchString));
					this.selectHeaderData.list = filteredArray
					
					
				}
				this.selectHeaderData.mask = true
			},
			/**
			 * 计算分类下拉框的左边位置
			*/
			calculateHeaderLeftBorder(){
				var that = this
				this.selectDirectoryData.mask = false
				const query = uni.createSelectorQuery().in(this);
				query.select('#header').boundingClientRect(res => {
					that.selectHeaderData.style.width = res.width+'px'
					
					
					var bottom = res.bottom
					
					var data = uni.getWindowInfo()
					
					var windowHeight = data.windowHeight
					
					if(windowHeight - bottom < 350){
						that.selectHeaderData.style.bottom   = (res.height ) +'px'//(data.height+data.top) +'px'////左边线路框的宽度
					}else{
						that.selectHeaderData.style.top   = (res.height  ) +'px'//(data.height+data.top) +'px'////左边线路框的宽度
					}
					
				}).exec();
				query.select('#headerLeft').boundingClientRect(res => {
					that.selectHeaderData.style.left = res.width +'px'
				}).exec();
				that.searchHeader()
			},
			/**
			 * 选中分类
			*/
			selectHeaderDataCheck(index){
				var item = this.selectHeaderData.list[index]
				this.selectHeaderData.value = item.name
				this.selectHeaderData.index  = index
				this.selectHeaderData.checkedId  = item.id
				this.selectHeaderData.mask  = false
				this.selectDirectoryData.mask = false
				
				//赋值目录
				this.sourceDirectoryList = item.list
				this.selectDirectoryData.checkedId = ""
				this.selectDirectoryData.index = -1
				this.selectDirectoryData.list = []
				this.selectDirectoryData.value = ""
			},
			/**
			 * 搜索目录
			*/
			searchDirectory(){
				if(this.selectDirectoryData.value.length<=0 ){
					this.selectDirectoryData.list = this.sourceDirectoryList
					
				}else{
					// 要查找的字符串
					const searchString  = this.selectDirectoryData.value;
					const originalArray = this.sourceDirectoryList;
					// 使用 filter 方法查找 name 属性中包含搜索字符串的对象
					const filteredArray = originalArray.filter(item => item.name.includes(searchString));
					this.selectDirectoryData.list = filteredArray
					
					if(filteredArray.length<=0 && this.selectHeaderData.value.length>0){
						this.$emit('call_directory',{
							header:{
								id:this.selectHeaderData.value,
								name:this.selectHeaderData.value
							},
							directory:{
								id:searchString,
								name:searchString
							},
						})
					}
					
				}
				this.selectDirectoryData.mask = true
			},
			/**
			 * 计算目录下拉框的左边位置
			*/
			calculateDirectoryLeftBorder(){
				var that = this
				this.selectHeaderData.mask = false
				const query = uni.createSelectorQuery().in(this);
				query.select('#directory').boundingClientRect(res => {
					that.selectDirectoryData.style.width = res.width+'px'
					
					
					
					var bottom = res.bottom
					
					var data = uni.getWindowInfo()
					
					var windowHeight = data.windowHeight
					
					if(windowHeight - bottom < 350){
						that.selectDirectoryData.style.bottom   = (res.height  ) +'px'//(data.height+data.top) +'px'////左边线路框的宽度
					}else{
						that.selectDirectoryData.style.top   = (res.height) +'px'//(data.height+data.top) +'px'////左边线路框的宽度
					}
				}).exec();
				query.select('#directoryLeft').boundingClientRect(res => {
					that.selectDirectoryData.style.left = res.width +'px'
					
				}).exec();
				that.searchDirectory()
			},
			
			/**
			 * 选中目录
			*/
			selectDirectoryDataCheck(index){
				var item = this.selectDirectoryData.list[index]
				this.selectDirectoryData.value = item.name
				this.selectDirectoryData.index  = index
				this.selectDirectoryData.checkedId  = item.id
				this.selectDirectoryData.mask  = false
				
			
				//(父组件中触发的事件名，要传的变量名)
				this.$emit('call_directory',{
					header:{
						id:this.selectHeaderData.checkedId,
						name:this.selectHeaderData.list[this.selectHeaderData.index].name
					},
					directory:{
						id:this.selectDirectoryData.checkedId,
						name:this.selectDirectoryData.list[this.selectDirectoryData.index].name
					},
				}) 
			},
			
			
			/**
			 * 自动分类
			*/
			goodsAiToHeader(){
				var that = this
				if(that.AiAutoGoodsName.length<=0){
					that.$common.toast('商品名称为空，请输入后再试。')
					return
				}
				var list =[]
				list.push(that.AiAutoGoodsName)
				that.$common.get_request(
					{
						type: 'goodsAiToHeader',
						goods: JSON.stringify(list),
					},
					(res)=>{
						if(res.data.goods_list.length<=0){
							that.$common.toast('因后台原因，分类失败！')
							return
						}
						that.selectHeaderData.value = res.data.goods_list[0].main_name
						that.selectHeaderData.checkedId  = res.data.goods_list[0].main_id
						that.selectHeaderData.mask  = false
						that.selectDirectoryData.mask = false
						
						//赋值目录
						that.selectDirectoryData.checkedId = res.data.goods_list[0].sub_id
						that.selectDirectoryData.value = res.data.goods_list[0].sub_name
						that.$common.toast(res.msg)
						
						
						that.$emit('call_directory',{
							header:{
								id:res.data.goods_list[0].main_id,
								name:res.data.goods_list[0].main_name
							},
							directory:{
								id:res.data.goods_list[0].sub_id,
								name:res.data.goods_list[0].sub_name
							},
						})
					}
				);
			},
		}
	}
</script>

<style>
</style>
